<template>
	<view class="container">
		<div class="flex">
			<div class="btn" @click="chooseImage">选择图片</div>
		</div>
		
		<view v-if="imagePath" class="imgs">
			<image :src="imagePath"  class="preview-image"></image>
		</view>
		<view v-if="mianxiang.age !== ''">
			<view class="hepanjieguo">
				<view class="title">
					<text class="shu"></text>
					<span class="ti">面相结果</span>
				</view>

				<view class="details">
					<view class="names">
						<text>基本信息</text>

					</view>
					<view class="des">

						<text class="des_deta"  user-select="true">你的年龄为{{mianxiang.age}},颜值为{{mianxiang.beauty}}分,{{mianxiang.beauty_desc}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>面相总分</text>

					</view>
					<view class="des">

						<text class="des_deta"  user-select="true">{{mianxiang.mianxiang_total_score}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>面相概述</text>

					</view>
					<view class="des">

						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_overview_desc}}</text>
					</view>
				</view>

				

				<view class="details">
					<view class="names">
						<text>脸型</text>

					</view>
					<view class="des">

						<text class="des_deta" user-select="true">{{mianxiang.face_shape}}：{{mianxiang.face_shape_score}}</text>
					</view>
				</view>

				<view class="details">
					<view class="names">
						<text>脸型描述</text>

					</view>
					<view class="des">

						<text class="des_deta" user-select="true">{{mianxiang.face_shape_desc}}</text>
					</view>
				</view>
				
				<view class="details">
					<view class="names">
						<text>面相五行详解</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_five_detail_desc}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>面相五行</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_five}}（{{mianxiang.mianxiang_five_simple_desc}}）</text>
					</view>
				</view>
				
				<view class="details">
					<view class="names">
						<text>眉型</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.eyebrow_shape}}【{{mianxiang.eyebrow_shape_score}}】</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>眉型描述</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.eyebrow_shape_desc}}</text>
					</view>
				</view>
				
				<view class="details">
					<view class="names">
						<text>眼型</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta">{{mianxiang.eye_shape}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>眼型描述</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.eye_shape_desc}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>鼻型</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta">{{mianxiang.nose_shape}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>鼻型描述</text>
				
					</view>
					<view class="des">
						<text class="des_deta" user-select="true">{{mianxiang.nose_shape_desc}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>嘴型</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta"><text>{{mianxiang.mouth_shape}}</text></text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>嘴型描述</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mouth_shape_desc}}</text>
					</view>
				</view>
				
				<view class="details">
					<view class="names">
						<text>而立之年运势</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_further_30}}</text>
					</view>
				</view>
				
				<view class="details">
					<view class="names">
						<text>知命之年运势</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_further_40}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>不惑之年运势</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_further_50}}</text>
					</view>
				</view>
				<view class="details">
					<view class="names">
						<text>花甲之年运势</text>
				
					</view>
					<view class="des">
				
						<text class="des_deta" user-select="true">{{mianxiang.mianxiang_further_60}}</text>
					</view>
				</view>
				

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath: '',
				mianxiang: {
					age:'' ,
					beauty: 26,
					beauty_desc: "你的颜值超过了全国的74%的人",
					expression: "",
					eye_shape: "",
					eye_shape_desc: "0000000---------",
					eye_shape_score: "18",
					mianxiang_overview_desc:'面向',
					eyebrow_shape: "00000000000",
					face_shape_desc:'sdf',
					eyebrow_shape_desc: "99999999",
					eyebrow_shape_score: "16",
					face_shape: "8888888",
					face_shape_score: "7777777777",
					face_type: "66666666",
					gender: "5555555",
					nose_shape_desc:'33',
					mianxiang_five: "4444444",
					mianxiang_five_detail_desc: "222222222222222",
					mianxiang_five_simple_desc: "33333333333333333333",
					mianxiang_further_30: "11111",
					mianxiang_further_40: "2222",
					mianxiang_further_50: "33333",
					mianxiang_further_60: "4444",
					mianxiang_total_score: 84,
					mouth_shape: "0",
					mouth_shape_desc: "1",
					mouth_shape_score: "17",
					nose_shape: "3",
					nose_shape_score: "17",
				}
			};
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths;
						this.imagePath = tempFilePaths[0];
						this.uploadImage()
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			uploadImage() {
				if (!this.imagePath) {
					this.uploadStatus = '请先选择图片';
					return;
				}

				const filePath = this.imagePath;
				const fileName = filePath.split('/').pop();

				// 这里的 URL 替换为你服务器的上传接口
				const uploadUrl = 'https://www.leedong.top:8081/api/upload';
				uni.showLoading({
					title:'分析中'
				})
				uni.uploadFile({
					url: uploadUrl,
					filePath: filePath,
					name: 'file', // 后端接收的文件字段名
					formData: {
						user: 'test' // 可以添加其他表单数据
					},
					success: (uploadFileRes) => {
						  let parseData=JSON.parse(uploadFileRes.data)
							this.mianxiang = parseData.data;
							
							uni.hideLoading()
					},
					fail: (err) => {
						this.uploadStatus = `上传失败: ${err.errMsg}`;
					}
				});
			}
		},
		onLoad() {

		}
	};
</script>

<style lang="scss">
	.btn{
		    width: 120px;
		    display: inline-block;
		    background-color: #e32616;
		    font-size: 30rpx;
		    color: #fff;
		    padding: 10px;
		    border-radius: 3px;
		    line-height: 15px;
			text-align: center;
		    margin-top: 20px;
	}
	.flex{
		display: flex;
		justify-content: center;
	}


	.container {
		padding: 20px;
		.imgs{
			display: flex;
			justify-content: center;
			.preview-image {
				margin-top: 20px;
				width: 100%;
				max-width: 300px;
				height: 654rpx;
			}
		}
		.hepanjieguo {
			background-color: #fff;
			margin: 0 5px;
			margin-top: 10px;
			border-radius: 10px;
		
			.title {
				display: flex;
				padding: 10rpx;
		
				.shu {
		
					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}
		
				.ti {
					padding-left: 15rpx;
					font-weight: 800;
					font-size: 30rpx;
				}
			}
		
			.details {
				border: 1px solid #e5e5e5;
				border-bottom: none;
				margin-top: 20px;
		
				.names {
					text-align: center;
					color: #e6a84b;
					border-bottom: 1px solid #e5e5e5;
					color: #e6a84b;
					font-weight: 800;
					background-color: #fff3ef;
					height: 50px;
					line-height: 50px;
				}
		
				.des {
					border-bottom: 1px solid #e5e5e5;
					
					text-align: center;

		
					.des_deta {
						width: 100%;
						line-height: 26px;
						text-indent: 2em;
						user-select: text;
						text-align: center;
					}
				}
			}
		
		}
	}

	
</style>